// 全局变量
@dex-purple:rgb(59,23,121);//导航条主背景
@hover-purple:rgb(48,15,105);
@border-gray:rgb(207,207,207);
@shadowGray:rgb(151,151,151);
@hover_bgcolor:rgb(240,241,243);
@bg-color:rgb(240,241,243);
@data-font:rgb(248,172,88);
@green:rgb(41,174,80);
@red:rgb(240,66,66);
@pageColor:rgb(53, 167, 233);
@dex-green:@pageColor;
@head-height:68px;
@container-width:1202px;
@prussianBlue:rgb(1,71,113);

/* 全局 */
body,html,ul,li,p{
    margin: 0;
    padding: 0;
    font-family: '微软雅黑';
    background-color: @bg-color;
    
}
body{
    min-height:1000px;
}
ul,li{
    list-style: none;
}
a,a:hover,a:active,a:visited,a:link{
    text-decoration: none;
}
::-webkit-input-placeholder {/*Chrome/Safari*/
    color:darken(@bg-color,20%);
    font-size: 12px;
}
::-moz-placeholder {/*Firefox*/
    color:darken(@bg-color,20%);
    font-size: 12px;
}
::-ms-input-placeholder {/*IE*/
    color:darken(@bg-color,20%);
    font-size: 12px;
} 
input{
    outline: none;
}
.left{
    float: left;
}
.red{color:@red};
.green{color:@green}
.purple{color:@dex-purple}
/* 内容 */
header{
    width:100%;
    height:@head-height;
    background-color: @dex-purple;
    position: relative;
    #tokenBalance{
        display: inline-block;
        position: absolute;
        z-index: 99;
        left: 45%;
        width: 503px;
        background: white;
        border:1px solid @border-gray;
        border-bottom: none;
        border-top: none;
        h4{
            font-size: 22px;
            color:lighten(@dex-purple,20%);
            padding: 15px;
            margin: 0;
            border-bottom: 2px solid @shadowGray;
        }
    }
    #tokenBalance_ul{
        border:1px solid @border-gray;
        border-top: none;
        display:inline-block;
        width: 503px;
        position: absolute;
        z-index: 99;
        left: 45%;
        background: white;
        line-height: 20px;
        margin-top: 56px;
        li{
            border: 0;
            color:@shadowGray;
            padding: 5px 10px;
            background: white;
            width: 167px;
            float: left;
            span{
                font-size:12px;
                margin-right:6px;
            }
            span:first-child{
                margin-top: -2px;
                font-size:14px;
            }
            &:hover{
                cursor: pointer;
                background: @hover_bgcolor;
            }
            img{
                height: 12px;
            }
        }
    }
    .logo_block{
        position: absolute;
        left: 0;
        color: @dex-green;
        font-size: 14px;
        line-height: @head-height;
    }
    .acount_block{
        position: absolute;
        right: 0;
        color:@bg-color;
        font-size: 14px;
        line-height: @head-height;
        .howToAdd{
            color:darken(@shadowGray,1%);
        }
        a{
            color:white;
        }
        ul{
            position: relative;
            z-index: 999;
            display: none;
        }
        .login ul li{
            background: @dex-purple;
            height:39px;
            padding-left: 20px;
            line-height: 39px;
        }
        #balance{
            display: inline-block;
            padding: 0 20px;
            &:hover{
                cursor: pointer;
                background: @hover-purple;
            }
            .firstspan{
                img{
                    height:15px;
                    margin:-3px 5px 0 0;
                }
            }
            .lastspan{
                img{
                    height:13px;
                    margin:-5px 5px 0 0;
                }
            }
        }
        .language{
            cursor: pointer;
            ul li{
                background: @dex-purple;
                height:39px;
                padding-left: 10px;
                line-height: 39px;
                text-align: justify;
            }
        }
        ul li{
            &:hover{
                background-color: @hover-purple;
            }
            &:not(:last-child){
                border-bottom: 1px solid darken(@dex-purple,10%);
            }
        }
        .navHover{
            &:hover{
                ul{
                    display:block;
                }
            }
        }
    }
}
nav{
    height:100%;
    #logo{
        width:92px;
        margin:0 28px;
    }
    .login{
        display: inline-block;
        line-height:@head-height;
        img{
            margin:0 5px 0 0;
        }
        &:hover .login_wrap{
            background-color: @hover-purple;
            border-bottom: 2px solid  @dex-green;
            position:  relative;
            z-index: 999;
        }
    }
    #account{
        img{
            margin:0 5px 2px 0;
        }
        &:hover .login_wrap{
            background-color: @hover-purple;
            border-bottom: 2px solid  @dex-green;
            position:  relative;
            z-index: 999;
        }
        ul{
            li{
                background: @dex-purple;
                height:39px;
                padding-left: 20px;
                line-height: 39px;
                text-align: justify;
                &:hover{
                    background-color: @hover-purple;
                }
                &:not(:last-child){
                    border-bottom: 1px solid darken(@dex-purple,10%);
                }
            }
        }
        .login_wrap{
            width:394px;
        }
    }
    .language{
        display: inline-block;
        line-height: @head-height;
        text-align: center;
        &:hover .language_wrap{
            background-color: @hover-purple;
            border-bottom: 2px solid  @dex-green;
            position:  relative;
            z-index: 999;
        }
        img{
            width: 18px;
            margin-top: -2px;
        }
        .language_wrap{
            padding:0 20px;
        }
    }
    .login_wrap,.language_wrap,.static_wrap{
        height:@head-height;
    }
    .login_wrap,.static_wrap{
        padding:0 20px;
    }
    .static_wrap{
        img{
            margin-top: -5px;
        }
    }
    #lang_nav{
        img{
            margin-right:10px;
        }
    }
    .exchangeRate{
        padding:0 40px;
        &:hover{
            cursor: pointer;
            text-decoration: underline;
        }
    }
}

.enter_transaction{
    display: inline-block;
    color: white;
    height:@head-height;
    padding:0 20px;
    &:hover{
        cursor: pointer;
        color: @dex-green;
        background-color: @hover-purple;
        border-bottom: 2px solid  @dex-green;
    }
}
#index{
    #myCarousel{
        .banner-font{
            width: 100%;
            text-align: center;
            position: absolute;
            top: 35%;
            z-index: 99;
            color: white;
        }
        .carousel-indicators{
            li{
                border-radius: 0;
                margin-left:35px;
                width:10px;
                height:10px;
            }
            .active{
                width:10px;
                height:10px;
                margin:0 0 1px 35px;
            }
        }
        .carousel-inner{
            background-color: black;
            img{
                margin:0 auto;
            }
        }
    }
    #container{
        display: flex;
        margin:20px 0 20px 0;
        .search_block{
            width:100%;
            height:48px;
            border-bottom: 1px solid @border-gray;
            .search_s{
                width:100%;
                height:100%;
                padding:0 20px;
                span{
                    &:hover{
                        cursor: pointer;
                        color:@dex-green;
                        border-bottom: 2px solid @dex-green;
                        .fa-star::before{
                            color:@dex-green;
                        }
                    }
                    padding:13px 32px;
                    display: inline-block;
                }
                .selected(){
                    color:@dex-green;
                    border-bottom: 2px solid @dex-green;
                    .fa-star::before{
                        color:@dex-green;
                    }
                }
                .selected{
                    .selected();
                }
                #self_s,#all_s{
                    &:hover{
                        cursor: pointer;
                        .selected();
                        .fa-star::before{
                            color:@dex-green;
                        }
                    }
                }
                .search{
                    display: inline-block;
                    margin-left:20px;
                    height:100%;
                    em{
                        margin-right:20px;
                        border-left:1px solid @shadowGray;
                    }
                    input{
                        width:400px;
                        border: none;
                        height:70%;
                    }
                }
                .fa-star::before{
                    margin-right: 5px;
                    color:black;
                }
            }
        }
        
        #market{
            width:@container-width;
            margin: 0 auto;
            border: 1px solid @border-gray;
            background-color: white;
            .market_table,.self_market_table{
                width:96%;
                margin:0 auto;
                table{
                    #index_tbody,#self_index_tbody{
                        tr{
                            td{
                                &:nth-child(2){
                                    text-align: justify;
                                    padding-left:40px;
                                }
                            }
                        }
                    }
                    margin-bottom:20px;
                    color:@shadowGray;
                    thead tr{
                        height:46px;
                        line-height: 46px;
                        .fa-sort::before{
                            margin-left: 3px;
                        }
                        th{
                            &:hover{
                                cursor: pointer;
                                color:@pageColor;
                            }
                            .fa-sort-up{
                                top:0;
                                display: inline-block;
                                height: 8px;
                            }
                            .fa-sort-down{
                                bottom:0;
                                display: inline-block;
                                left: -10px;
                            }
                            i{
                                color:@border-gray;
                            }
                        }
                    }
                    tbody{
                        tr{
                            height:37px;
                            text-align: center;
                            border: none;
                            td{
                                img{
                                    width:12px;
                                    margin-right:5px;
                                    margin-top: -3px;
                                }
                                position: relative;
                                &:first-child{
                                    text-align: justify;
                                    padding-left: 20px;
                                }
                            }
                            &:nth-of-type(even){
                                background-color: @bg-color;
                            }
                            &:hover{
                                background-color: fade(@dex-purple,15%);
                            }
                            img{
                                width:14px;
                                height:14px;
                                &:hover{
                                    cursor: pointer;
                                }
                            }
                        }
                    }
                }
                #noSelectedItem{
                    text-align: center;
                    color:@border-gray;
                    margin: 20px;
                    h4{
                        font-size:16px;
                        span{
                            cursor: pointer;
                            color:@dex-green;
                        }
                    }
                }
                
            }
        }
    }
}
#pagination,#self_pagination{
    background: white;
    text-align: center;
    ul{
        background: white;
        margin: 20px 0;
        .hovering{
            color: lighten(@dex-purple,20%);
            border:1px solid lighten(@dex-purple,20%);
        }
        span{
            padding: 5px;
            text-align: center;
            color:@shadowGray;
            font-size: 14px;
            display: inline-block;
            background: white;
            margin-right: 10px;
        }
        li{
            padding: 5px 10px;
            text-align: center;
            border:1px solid @border-gray;
            color:@shadowGray;
            font-size: 14px;
            display: inline-block;
            background: white;
            margin-right: 10px;
            &:hover{
                cursor: pointer;
                color: lighten(@dex-purple,20%);
                border:1px solid lighten(@dex-purple,20%);
            }
        }
    }
}
#main{
    width:@container-width;
    margin:20px auto;
    #token-sort{//代币分类
        width:100%;
        height:116px;
        border:1px solid @border-gray;
        background: white;
        .token-sort-up{
            display: flex;
            height:73px;
            border-bottom: 1px solid fade(@border-gray,35%);
            padding: 8px;
            .self-s{
                color:lighten(@dex-purple,20%);
                font-size: 15px;
                font-weight: bold;
                padding: 10px 20px;
            }
            .self-s,#more-s{
                display: inline-block;
                width:100px;
                text-align: right;
            }
            #more-s{
                position: relative;
                a{
                    color:darken(@shadowGray,20%);
                    font-weight: 600;
                    font-size: 12px;
                    position: absolute;
                    bottom: 0;
                    left: 0;
                    .fa-sort-desc{
                        position: relative;
                        bottom: 2px;
                    }
                }
            }
            .sort{
                width:1002px;
                border-left:1px solid darken(@border-gray,30%);
                padding:0 20px;
                ul{
                    background: white;
                    width:100%;
                    display: inline-block;
                    li{
                        margin: 0 20px 0 10px;
                        background: white;
                        padding:4px 0;
                        display: inline-block;
                        margin-top: 1px;
                        height: 28px;
                        span{
                            font-size:12px;
                            margin-right:6px;
                        }
                        span:first-child{
                            margin-top: -2px;
                            font-size:14px;
                        }
                        &:hover{
                            cursor: pointer;
                            color:lighten(@dex-purple,20%);
                            border-bottom:2px solid lighten(@dex-purple,20%);
                            span:last-child{
                                color:lighten(@dex-purple,20%);
                            }
                        }
                        img{
                            height: 12px;
                        }
                    }
                }
            }
        }
        .token-sort-down{
            padding:0 8px;
            .self-s{
                color:lighten(@dex-purple,20%);
                font-size: 15px;
                font-weight: bold;
                padding: 10px 20px;
            }
            .self-s,#more-s{
                display: inline-block;
                width:100px;
                text-align: right;
            }
            div:nth-child(2){
                border-left:1px solid darken(@border-gray,30%);
                display: inline-block;
                width: 375px;
                padding-left: 30px;
                margin-left: -4px;
                select{
                    border:1px solid lighten(@dex-purple,20%);
                    height: 28px;
                    padding:2px 5px;
                    color:lighten(@dex-purple,20%);
                    font-weight: bold;
                    outline: none;
                }
                input{
                    border:1px solid lighten(@dex-purple,20%);
                    padding: 3px 10px;
                    margin-left: -4px;
                }
                .fa-search::before{
                    color:white
                }
                a{
                    display: inline-block;
                    padding: 4px 25px;
                    color: white;
                    background: lighten(@dex-purple,20%);
                    margin-left: -4px;
                }
            }
            .self-define{
                color:lighten(@dex-purple,20%);
                font-weight: 600;
                font-size: 14px;
                position: relative;
                bottom: 0;
                left: 0;
            }
        }
    }

    .token-trade{//代币交易
        margin:20px auto;
        position: relative;
        .trade-left{
            display: inline-block;
            width:792px;
            hgroup{
                padding:22px 36px;
                background: white;
                border:1px solid @border-gray;
                background: white;
                color: lighten(@dex-purple,20%);
                h1{
                    display: inline-block;
                }
                span{
                    color:@shadowGray;
                    font-weight: bold;
                    margin-left: 50px;
                    position: relative;
                    bottom: 8px;
                }
            }
            .trading{
                margin:20px auto;
                padding: 60px 56px 35px 56px;
                border:1px solid @border-gray;
                background: white;
                position: relative;
                div{
                    color: fade(@shadowGray,90%);
                    width: 264px;
                    box-sizing: content-box;
                    position: relative;
                    margin-bottom: 25px;
                }
                
                .buying{
                    display:inline-block; 
                    border-right:2px solid fade(@shadowGray,30%);
                    padding-right: 76px;
                    div:first-child{
                        margin-top: -15px;
                        h3{
                            color:@green;
                        }
                    }
                    input[type=button]{
                        width: 100%;
                        border: none;
                        background: @green;
                        color: white;
                        padding: 9px 0;
                    }
                }
                .selling{
                    display:inline-block;
                    padding-right: 76px; 
                    position: absolute;
                    right:0; 
                    div:first-child{
                        margin-top: -15px;
                        h3{
                            color:@red;
                        }
                    }
                    input[type=button]{
                        width: 100%;
                        border: none;
                        background: @red;
                        color: white;
                        padding: 9px 0;
                    }
                }
                .trade-block{
                    div:first-child{
                        h3{
                            display: inline-block;
                        }
                        span{
                            position: absolute;
                            right: 0;
                            top: 40%;
                        }
                    }
                    div:nth-child(2){
                        span:last-child{
                            position: absolute;
                            right: 0;
                        }
                    }
                    div:nth-child(3),div:nth-child(4){
                        border: 1px solid fade(@shadowGray,50%);
                        span{
                            &:first-child{
                                padding: 0 10px;
                                border-right: 1px solid @border-gray;
                            }
                            &:last-child{
                                display: inline-block;
                                padding: 0;
                                border: 0;
                                position: absolute;
                                right: 13px;
                                top: 6px;
                                .fa-sort-up,.fa-sort-down{
                                    display: block;
                                    font-size: 18px;
                                    height: 3px;
                                    &:hover{
                                        cursor: pointer;
                                        opacity:0.7;
                                    }
                                }
                            }
                        }
                        input[type=text]{
                            width:100px;
                            border:none;
                            padding: 6px 0;
                            margin-left: 10px;
                        }
                    }
                    div:nth-child(5){
                        span{
                            width: 58px;
                            height: 36px;
                            border: 1px solid fade(@shadowGray,50%);
                            margin-right: 1px;
                            padding: 8px 13px;
                            color:fade(@shadowGray,90%);
                        }
                    }
                    
                }
            }
        }
        .trade-right{
            display: inline-block;
            margin:0 0 27px 20px;
            border:1px solid @border-gray;
            width:383px;
            background: white;
            position: absolute;
            top: 0;
            table{
                width:100%;
                text-align: center;
                th{
                    text-align: center;
                }
            }
            .table-tit{
                border-bottom:1px solid @border-gray;
                height: 26px;
                color:lighten(@dex-purple,15%);
                font-weight: bold;
            }
            .table-list{
                table{
                    tr{
                        color:fade(@shadowGray,90%);
                        td:first-child{
                            font-weight: bold;
                            padding: 4px 0;
                        }
                    }
                }
            }
            .buy-table-list{
                table{
                    tr{
                        td:first-child{
                            color:@green;
                        }
                    }
                }
            }
            .sell-table-list{
                table{
                    tr{
                        td:first-child{
                            color:@red;
                        }
                    }
                }
            }
            .increase{
                padding: 5px 0;
                text-align: center;
                color:@green;
                background: @bg-color;
                font-weight: bold;
            }
        }
    }

    #history{
        background: white;
        padding:10px 5px;
        h2{
            font-size: 20px;
            font-weight: bold;
            color:@shadowGray;
            margin: 0 auto;
            padding:0 40px;
            border-bottom:1px solid fade(@border-gray,80%);
            height: 44px;
            span{
                display: inline-block;
                margin-right: 60px;
                padding: 10px 0;
                &:hover{
                    color:lighten(@dex-purple,15%);
                    cursor: pointer;
                    border-bottom:2px solid lighten(@dex-purple,15%);
                }
            }
            .nowSelect{
                color:lighten(@dex-purple,20%);
                border-bottom:2px solid lighten(@dex-purple,15%);
            }
        }
        table{
            width: 100%;
            text-align: center;
            margin: 0 auto;
            th{
                text-align: center;
                font-weight: bold;
            }
            tr{
                color:fade(@shadowGray,70%);
                td{
                    padding: 7px 0;
                    vertical-align: middle;
                }
            }
            tbody{
                tr{
                    &:nth-of-type(odd){
                        background: @bg-color;
                    }
                    &:hover{
                        background: fade(@dex-purple,15%);
                    }
                }
                .green-button{
                    color:@green;
                    border:1px solid @green;
                    background: white;
                    padding:3px 12px;
                }
                .red-button{
                    color:@red;
                    border:1px solid @red;
                    background: white;
                    padding:3px 12px;
                }
            }
        }
    }
}


footer{
    position: relative;
    width:100%;
    .wrap{
        position: relative;
        width:@container-width;
        margin: 0 auto;
        .copyright{
            position: absolute;
            left: 0;
            font-size: 12px;
            color: @shadowGray;
            padding: 20px 0;
            margin-top: 10px;
        }
        .dex_logo_gray{
            position: absolute;
            right:0;
            padding: 20px 0;
            width: 92px;
        }
    }
}

// 修改bootstrap默认样式
.table-condensed>thead>tr>th{
    padding:13px 25px;
    text-align: center;
    font-weight: 100px;
    border:none;
}
.table>thead>tr>td,
.table>thead>tr>th{
    border-top: none;
}
.table-condensed>tbody>tr>td{
    padding:10px 0;
}
.table>tbody>tr>td, .table>tbody>tr>th, 
.table>tfoot>tr>td, .table>tfoot>tr>th, 
.table>thead>tr>td, .table>thead>tr>th{
    border-top:none;
}

// 国旗
.fa-th-list::before,.fa-sign-in::before{
    margin-left: -10px;
    margin-right:5px;
}

.fa-search::before{
    color:@shadowGray;
}

.flag{
    width:18px;
    height:12px;
    display: inline-block;
    margin-bottom: -1px;
    margin-right:5px;
}
.fa-user-o::before,.fa-plus::before{
    margin-right:10px;
}
.flag-cn{background-position:0 0;}
.flag-en{background-position:0 -21px;}
.flag-jp{background-position:0 -84px;}
.flag-kr{background-position:0 -42px;}
.fa-sort-desc,.fa-sort-down{
    position: relative;
    bottom: 2px;
    left: 2px;
}
.fa-sort-up{
    position: relative;
    top: 2px;
    left: 2px;
}
.modal-content{
    iframe{
        width: 100%;
        height: 500px;
        padding: 20px;
    }
}
section{
    .dexContain{
        width:1202px;
        margin: 0 auto;
    }
}

#recharge,#tradelog{
    width: 100%;
    margin: 20px 0 0 0;
    #title{
        background: white;
        padding:25px 40px;
        padding-bottom: 50px;
        position: relative;
        color:@prussianBlue;
        font-weight: bold;
        .up{
            position: relative;
            width: 100%;
            h2{
                display:inline-block;
                position: relative;
                left:0;
                margin: 0;
                font-weight: bold;
            }
            h5{
                display:inline-block;
                position: absolute;
                right:0;
                font-weight: bold;
            }
        }
        p{
            background: white;
            position: absolute;
            right:40px;
            margin: 0;
            span{
                width: 18px;
                height: 18px;
                background: #014771;
                border-radius: 20px;
                color: white;
                display: inline-block;
                text-align: center;
                margin-right: 5px;
            }
        }
    }
    .re_container{
        background: white;
        padding:25px 30px;
        position: relative;
        margin-top: 15px;
        .search_block{
            width:100%;
            height:48px;
            border-bottom: 1px solid @border-gray;
            .search_s{
                width:100%;
                height:100%;
                img{
                    margin: -2px 5px 0 0;
                }
                span{
                    &:hover{
                        cursor: pointer;
                        color:@dex-green;
                        border-bottom: 2px solid @dex-green;
                        .fa-star::before{
                            color:@dex-green;
                        }
                    }
                    padding:13px 32px;
                    display: inline-block;
                }
                .selected(){
                    color:@dex-green;
                    border-bottom: 2px solid @dex-green;
                    .fa-star::before{
                        color:@dex-green;
                    }
                }
                .selected{
                    .selected();
                }
                #self_s,#all_s{
                    &:hover{
                        cursor: pointer;
                        .selected();
                        .fa-star::before{
                            color:@dex-green;
                        }
                    }
                }
                .search{
                    display: inline-block;
                    margin-left:20px;
                    height:100%;
                    em{
                        margin-right:20px;
                        border-left:1px solid @shadowGray;
                    }
                    input{
                        width:400px;
                        border: none;
                        height:70%;
                    }
                }
                .fa-star::before{
                    margin-right: 5px;
                    color:black;
                }
            }
        }
        .re_table{
            width:96%;
            margin:0 auto;
            .table{
                width: 100%;
                margin-bottom:20px;
                color:@shadowGray;
                .th{
                    margin-top: -10px;
                }
                .rechargeTrWidth{
                    span{
                        display: inline-block;
                        &:first-child{
                            width:10%;
                        }
                        &:nth-child(2){
                            width:17%;
                        }
                        &:nth-child(3){
                            width:19%;
                        }
                        &:nth-child(4){
                            width:17%;
                        }
                        &:nth-child(5){
                            width:17%;
                        }
                        &:last-child{
                            width:18%;
                            height: 37px;
                        }
                    }
                }
                .tradelogTrWidth{
                    span{
                        display: inline-block;
                        
                        &:first-child{
                            width:8%;
                        }
                        &:nth-child(2){
                            width:15%;
                        }
                        &:nth-child(3){
                            width:6%;
                        }
                        &:nth-child(4){
                            width:8%;
                        }
                        &:nth-child(5){
                            width:10%;
                        }
                        &:nth-child(6){
                            width:10%;
                        }
                        &:nth-child(7){
                            width:10%;
                        }
                        &:nth-child(8){
                            width:10%;
                        }
                        &:nth-child(9){
                            width:9%;
                        }
                        &:last-child{
                            width:10%;
                            height: 37px;
                        }
                    }
                }
                .thead .tr{
                    height:46px;
                    line-height: 46px;
                    .fa-sort::before{
                        margin-left: 3px;
                    }
                    .th{
                        padding-left: 20px;
                        &:hover{
                            cursor: pointer;
                            color:@pageColor;
                        }
                        .fa-sort-up{
                            top:0;
                            display: inline-block;
                            height: 8px;
                        }
                        .fa-sort-down{
                            bottom:0;
                            display: inline-block;
                            left: -10px;
                        }
                        i{
                            color:@border-gray;
                        }
                    }
                }
                .tbody{
                    width: 100%;
                    .fa-angle-double-up{
                        color:@prussianBlue;
                        font-size: 18px;
                        &:hover{
                            cursor:pointer;
                            font-size:22px;
                        }
                    }
                    .reClicking{
                        background: lighten(@pageColor,40%);
                    }
                    .reTr{
                        &:nth-of-type(odd){
                            background-color: @bg-color;
                        }
                        &:hover{
                            background-color: fade(@dex-purple,15%);
                        }
                    }
                    .tr{
                        height:38px;
                        border: none;
                        .td{
                            padding-left:20px;
                            text-align: left;
                            position: relative;
                            .blueBtn{
                                color:white;
                                background:@pageColor !important;
                                border:1px solid @pageColor !important;
                            }
                            .reC{
                                border: 1px solid @border-gray;
                                background: none;
                                padding: 3px 20px;
                                margin-right: 10px;
                                margin-top: 5px;
                                &:hover{
                                    background: @pageColor;
                                    color:white;
                                    border:1px solid @pageColor;
                                }
                            }
                            img{
                                width:12px;
                                margin-right:5px;
                                margin-top: -3px;
                            }
                            &:first-child{
                                text-align: justify;
                                padding-left: 20px;
                            }
                        }
                        &:nth-of-type(even){
                            background-color: @bg-color;
                        }
                        img{
                            width:14px;
                            height:14px;
                            &:hover{
                                cursor: pointer;
                            }
                        }
                    }
                    .recharge_p{
                        .firstBL{
                            width: 27%;
                            h3{
                                padding-left:10px;
                            }
                            div{
                                border: 1px solid rgba(151, 151, 151, 0.5);
                                color: rgba(151, 151, 151, 0.9);
                                width: 244px;
                                box-sizing: content-box;
                                position: relative;
                                margin-bottom: 5px;
                                input{
                                    width: 100px;
                                    border: none;
                                    padding: 6px 0;
                                }
                                
                                span{
                                    &:first-child{
                                        padding: 0 10px;
                                        border-right: 1px solid #cfcfcf;
                                    }
                                    &:last-child{
                                        position: relative;
                                        .fa-sort-up{
                                            position: absolute;
                                            height: 6px;
                                        }
                                        .fa-sort-down{
                                            position: relative;
                                            top: 1px;
                                        }
                                    }
                                }
                            }
                        }
                        .thirdBL{
                            width: 31%;
                            h3{
                                padding-left: 10px;
                            }
                        }
                    }
                    .withdraw_p{
                        .thirdBL{
                            width: 27%;
                            h3{
                                padding-left:10px;
                            }
                            div{
                                border: 1px solid rgba(151, 151, 151, 0.5);
                                color: rgba(151, 151, 151, 0.9);
                                width: 244px;
                                box-sizing: content-box;
                                position: relative;
                                margin-bottom: 5px;
                                input{
                                    width: 100px;
                                    border: none;
                                    padding: 6px 0;
                                }
                                
                                span{
                                    &:first-child{
                                        padding: 0 10px;
                                        border-right: 1px solid #cfcfcf;
                                    }
                                    &:last-child{
                                        position: relative;
                                        .fa-sort-up{
                                            position: absolute;
                                            height: 6px;
                                        }
                                        .fa-sort-down{
                                            position: relative;
                                            top: 1px;
                                        }
                                    }
                                }
                            }
                        }
                        .firstBL{
                            width: 31%;
                            h3{
                                padding-left: 10px;
                            }
                        }
                    }
                    .secondBL{
                        width: 19%;
                        padding: 35px 0;
                        .fa-angle-right{
                            position: relative;
                            z-index: 999;
                            color: white;
                            margin-left: -40px;
                            font-size: 18px;
                            top: 1px;
                        }
                        .fa-angle-left{
                            position: relative;
                            z-index: 999;
                            color: white;
                            margin-right: -30px;
                            font-size: 18px;
                            top: 1px;
                            padding-left: 20px;
                        }
                    }
                    
                    .fourBL{
                        width: 23%;
                        position: relative;
                        .fa-question-circle-o{
                            position: absolute;
                            top: 25%;
                            font-size: 20px;
                            color:lighten(@shadowGray,10%);
                        }
                        p{
                            padding: 20px;
                            font-size: 12px;
                            margin-left: 20px;
                        }
                    }
                    .recharge_p,.withdraw_p{
                        height:147px;
                        background: white;
                        padding: 10px 0 20px 0;
                        border-bottom:1px solid @border-gray;
                        .BL{
                            float: left;
                            padding-left:20px;
                        }
                        .payBtn{
                            background: @pageColor;
                            color:white;
                            border:1px solid @pageColor;
                            padding: 6px 50px;
                            margin-right: 10px;
                            margin-top: 20px;
                        }
                        p{
                            background: white;
                            padding-left:10px;
                            color:lighten(@shadowGray,10%);
                        }
                    }
                }
            }
        }
    }
}

